<template>
  <div class="page has-navbar" v-nav="{ title: '花材花语', showBackButton: true, onBackButtonClick: back,showMenuButton: true,onMenuButtonClick: menu }">
    <div class="page-content text-center">
      <list>
        <div v-for="(lang , index) in langs" :key="index"  :class="'list-item ' + [lang.active ? 'active' : '']">
          <span class="mark "></span>
          <p><span>{{lang.title}} </span>{{lang.content}}</p>
        </div>
      </list>
    </div>
  </div>
</template>

<script>
    export default {
      name: "FlowerKindLang",
      data(){
        return{
          langs : [
            {
              title : '红玫瑰',
              content : '热情、热恋、热爱着你',
              active : true
            },
            {
              title : '粉玫瑰',
              content : '初恋、爱的宣言、关心'
            },
            {
              title : '白玫瑰',
              content : '天真、纯洁、纯真的爱',
            },
            {
              title : '紫玫瑰',
              content : '浪漫真情、珍贵独特'
            },
            {
              title : '蓝玫瑰',
              content : '清醇的爱、敦厚善良'
            },
            {
              title : '香槟玫瑰',
              content : '我只钟情你一个'
            },
            {
              title : '黄玫瑰',
              content : '为爱道歉'
            },
            {
              title : '红色康乃馨',
              content : '思念、祝健康长寿'
            },
            {
              title : '黄色康乃馨',
              content : '对母亲的感激之情、热爱着您'
            },
            {
              title : '粉色康乃馨',
              content : '祝永远美丽'
            },
            {
              title : '郁金香',
              content : '爱的告白、永恒的祝福'
            },
            {
              title : '马蹄莲',
              content : '永恒、优雅、希望、纯洁'
            },
            {
              title : '百合',
              content : '顺利、心想事成、祝福'
            },
            {
              title : '向日葵',
              content : '勇敢的去追求幸福、沉默的爱'
            },
          ]
        }
      },
      methods : {
        back(){
          this.$router.go(-1)
        },
        menu(){

        }
      }
    }
</script>

<style scoped lang="less">
*{
  padding: 0;
  margin: 0;
}
.list-item{
  position: relative;
  text-align: start;
  margin: 30px 15px;
  margin-left: 40px;
  .mark{
    width: 20px;
    height: 20px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background: #ef2b67;
    position: absolute;
    left: -25px;
  }
  p{
    color: #666666;
    font-size: 14px;
    >span{
      margin-right: 20px;
      font-size: 18px;
    }
  }
}
.active{
  .mark{
    width: 8px;
    height: 8px;
    top: calc(50% - 4px);
  }
  p>span{
    color: #f1556f;
  }
}
</style>
